<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html{
            border:1px solid red;
            width: 500px;
            height: 500px;
        }
        body{
            border:1px solid darkslategrey;
            width: 400px;
            height: 400px;
        }
        .content{
            margin-top:200px;
            height:1200px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div class="content">
    <input type="button" value="打开窗口" onclick="openWindow()" />
    <br><br>
    <input type="button" value="移动窗口" onclick="moveWindow()" />
    <br><br>
    <input type="button" value="重新设置窗口大小" onclick="setWindow()" />
    <br><br>
    <input type="button" value="缩小窗口大小" onclick="reduceWindow()" />
</div>
</body>
<script>
    /**** 窗口关系
     * 1.top 对象始终指向最上层（最外层）窗口，即浏览器窗口本身。
     * 2.parent 对象则始终指向当前窗口的父窗口。如果当前窗口是最上层窗口，则 parent 等于 top（都等于 window）
     * 3.self 对象始终会指向 window。实际上，self 和 window 就是同一个对象。之所以还要暴露 self，就是为了和 top、parent 保持一致
     * 4.以上属性都是 window 对象的属性，因此访问
     *  window.parent、
     *  window.top
     *  window.self
     *  都可以。这意味着可以把访问多个窗口的 window 对象串联起来，比如 window.parent.parent。
     */
    console.log(window.top);//window
    console.log(window.parent);//window
    console.log(window.self);//window
    console.log(window.self === window.parent);//true
    console.log(window.self === window.top);//true
    console.log('-------------------------------------------------------')
    /**窗口位置
     * 1.window 对象的位置可以通过不同的属性和方法来确定。
     * 2.现代浏览器提供了screenLeft和screenTop 属性，用于表示窗口相对于屏幕左侧和顶部的位置 ，返回值的单位是 CSS 像素
     * 3.使用moveTo()移动窗口：接收要移动到的新位置的绝对坐标 x 和 y；
     * 4.使用moveBy()移动窗口：接收相对当前位置在两个方向上移动的像素数
     */
     //此处的窗口应该指的是浏览器窗口，而屏幕应该是指笔记本电脑的物理屏幕，当浏览窗口小于物理屏幕时候，将显示screenLeft，screenTop指
     console.log('窗口相对于屏幕左侧:'+window.screenLeft)//198
     console.log('窗口相对于屏幕顶部:'+window.screenTop)//344
    //普通网页中的JavaScript无法通过调用该函数(moveTo,moveBy)来移动浏览器窗口,需要满足如下条件(参考MDN)
    //1.当前窗口或标签页是由window.open方法创建的.
    //2.当前标签页所在的窗口只有一个标签页
    //3.(以上都说明一点，用户通过点击启动浏览器App进入的页面的窗口，是无法被用户采用api移动的，只有用户进入页面之后，手动创建的窗口
    //  采用可能被这些api所控制)
     let myWindow=null;
     function openWindow(){
         //浏览器会在用户操作下才允许创建弹窗。在网页加载过程中调用 window.open()没有效果，
         myWindow=window.open('','_parent','width=200,height=100');
         myWindow.document.write("<p>这是'我的窗口'</p>");
     }
     function moveWindow(){
         myWindow.moveTo(50,50);
         // 把窗口移动到坐标位置(200, 300)
         myWindow.moveTo(200, 300);
         // 把窗口向左移动 50 像素
         myWindow.moveBy(-50, 0);
     }
     //1.以上方法:moveTo、moveBy依浏览器而定，可能会被部分或全部禁用。
     //2.实践发现，无法在初始化的时候就调用moveTo(),open();

    /**像素比
     * 1.window.devicePixelRatio是设备物理像素和设备独立像素（device-independent pixels，dips）之间的比率。
     * 2.window.devicePixelRatio = 物理像素/ 设备独立像素
     * 3.设备物理像素:是一个物理概念，比如设备的分辨率，Phone 5的分辨率640 x 1136px
     * 4.设备独立像素dips:是一个抽象像素，用于向CSS中的宽度、高度、媒体查询和meta 的viewport 中的device-width提供信息。
     *   通过观察retina和非retina设备之间的区别，可以最好地解释它们。
 *   * 5.CSS像素:是Web编程的概念，指的是CSS中使用的逻辑像素。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。
     *   px是一个相对单位，相对的是设备物理像素。比如iPhone 5使用的是Retina屏幕，使用2px x 2px的设备物理像素，
     *   代表 1px x 1px 的 CSS像素，所以设备物理像素为640 x 1136px，而CSS逻辑像素数为320 x 568px。
     */

    /**
     * 窗口大小
     *  1.在不同浏览器中确定浏览器窗口大小没有想象中那么容易。所有现代浏览器都支持 4 个属性。
     *  2.innerWidth、innerHeight、outerWidth 和 outerHeight。
     *  3.outerWidth 和 outerHeight 返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格<frame>中使用）
     *  4.innerWidth和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。
     *  5.document.documentElement.clientWidth 和 document.documentElement.clientHeight 返回页面视口的宽度和高度。
     *  6.在移动设备上，window.innerWidth 和 window.innerHeight 返回视口的大小，也就是屏幕上页面可视区域的大小。
     *  7.在其他移动浏览器中，document.documentElement.clientWidth 和 document.documentElement.clientHeight
     *    返回的布局视口的大小，即渲染页面的实际大小。
     */
    //1.innerWidth、innerHeight、outerWidth 和 outerHeight
    console.log('outerWidth:'+window.outerWidth);//返回当前浏览器窗口的宽度(浏览器基准,例如开启浏览器调试模式，值不会变化)
    console.log('outerHeight:'+window.outerHeight);//返回当前浏览窗口的高度(浏览器基准,例如开启浏览器调试模式，值不会变化)
    console.log('innerWidth:'+window.innerWidth);//返回当前浏览器页面的宽度(文档页面基准，例如开启浏览器调试模式，值会变化)
    console.log('innerHeight:'+window.innerHeight);//返回当前浏览器页面的高度(文档页面基准，例如开启浏览器调试模式，值会变化)
    //2.clientWidth和clientHeight
    // (PC端：浏览器的可视区域，当不存在滚动的时候，与innerWidth，innerHeight保持一致)
    // (移动端：当前设备的屏幕区域，当不存在滚动的时候，与innerWidth，innerHeight保持一致)
    console.log('clientWidth:'+document.documentElement.clientWidth);//返回当前浏览器页面的宽度(返回页面视口的宽度，与innerWidth一致)
    console.log('clientHeight:'+document.documentElement.clientHeight);//返回当前浏览器页面的高度(返回页面视口的高度，与innerHeight一致)
    //3.确定页面视口大小的兼容方法(IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的)
    let pageWidth = window.innerWidth;//获取当前浏览器页面的宽度
    let pageHeight = window.innerHeight;//获取当前浏览器页面的高度
    if(typeof pageHeight !== 'number'){
        if(document.compatMode === 'CSS1Compat'){ //检查页面是否处于标准模式
            //document.compatMode，它有两种可能的返回值：BackCompat 和 CSS1Compat ，对其解释如下：
            /**
             * BackCompat：标准兼容模式关闭.
             * CSS1Compat：标准兼容模式开启。
             * 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
             * 当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
             */
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }

    }
    //4.resizeTo()和resizeBy()方法调整窗口大小.这两个方法都接收两个参数.
    //  resizeTo()接收新的宽度和高度值，而 resizeBy()接收宽度和高度各要缩放多少
    //  注意：从 Firefox 7 开始，不能改变浏览器窗口的大小了，要依据下面的规则：(与moveTo，moveBy规则类似)
    //  1.不能设置那些不是通过 window.open 创建的窗口或 Tab 的大小。
    //  2.当一个窗口里面含有一个以上的 Tab 时，无法设置窗口的大小。
    function setWindow(){
        //设置宽高500*500
        myWindow.resizeTo(500,500)
    }
    function reduceWindow(){
        //各缩小250*250
        myWindow.resizeBy(-250, -250);
    }
</script>
</html>